<template>
	<view class="e-dropdown-menu">
		<view class="e-dropdown-menu__scroll-wrapper">
			<scroll-view :scroll-x="props.scrollable" class="e-dropdown-menu__scroll-view"  :show-scrollbar="false">
				<view class="e-dropdown-menu__scroll__nav" :style="[bodyStyle]">
					<view class="e-dropdown-menu__scroll__nav__item" v-for="(item, index) in children" :key="item.id"
						@tap="handlerClick(index)"
						:style="[addStyle(props.itemStyle),activeIndex === index ? addStyle(props.activeStyle) : {} ,{flex: props.scrollable ? '' : 1}]"
						:class="[item.disabled && 'e-dropdown-menu__scroll__nav__item--disabled']">
						<view class="e-dropdown-menu__scroll__nav__item__text-wrapper">
							<text :class="[item.disabled && 'e-dropdown-menu__scroll__nav__item__text--disabled']"
								class="e-dropdown-menu__scroll__nav__item__text">{{ item.title }}</text>
						</view>
						
						<e-icon :name="item.active ? props.upIconName : props.downIconName" :size="props.iconSize"
							:color="item.active ? props.activeColor : props.inactiveColor" />
					</view>
				</view>
			</scroll-view>
		</view>
		<slot></slot>
	</view>
</template>

<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	import mpMixin from '../../libs/mixin/mpMixin'
	/**
	 * dropdown-menu 二维码
	 * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
	 * @tutorial https://www.uviewui.com/components/popup.html
	 * @property {String}					activeColor				菜单标题和选项的选中态颜色
	 * @property {String | Object}			activeStyle				菜单标题选中态样式
	 * @property {String}					inactiveColor			菜单标题和选项的选中态颜色
	 * @property {Number}					duration				动画时长,单位毫秒
	 * @property {Boolean}					overlay					是否显示遮罩层
	 * @property {Boolean}					closeOnClickOverlay		点击遮罩是否关闭弹窗
	 * @property {String}					upIconName				上箭头图标
	 * @property {String}					downIconName			下箭头图标
	 * @property {Number | String}			iconSize				箭头图标大小
	 * @property {Number | String}			height					组件高度
	 * @property {Number}					popupZIndex				popup的zIndex
	 * @property {String}					bgColor					背景颜色
	 * @property {Boolean}					scrollable				菜单是否可滚动
	 * @property {String | Object}			itemStyle				菜单item的样式
	 * @property {Object}					props					item配置项
	 * @property {Boolean}					borderBottom			是否显示下划线边框
	 * @property {String}					borderColor				下划线颜色
	 * @property {Boolean}					disabled				是否禁用
	 */
	export default defineComponent({
		name: 'e-dropdown-menu',
		mixins: [mpMixin]
	})
</script>

<script lang="ts" setup>
	import {
		ref,
		reactive,
		computed,
		toRefs,
		provide
	} from "vue";
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import {
		dropdownMenuProps,
	} from "./props";
	import {
		type DropdownMenuContext,
		type DropdownMenuItemContext,
		dropdownMenuContextKey
	} from '../../libs/tokens'
	import {
		addUnit,
		addStyle
	} from "../../libs/utils/_utils";
	import componentsProps from "../../libs/config/componentsProps";
	import type {
		 DropdownMenuProps
	} from "../../libs/config/propsType";

	const {
		dropdownMenu: dropdownMenuDefaultProps
	} = toRefs(componentsProps);

	const _props = defineProps(dropdownMenuProps)

	const props = useDefaultProps <DropdownMenuProps> (_props, dropdownMenuDefaultProps);

	const children = reactive<DropdownMenuItemContext[]>([])
	
	const addField: DropdownMenuContext['addField'] = (field) => {
		children.push(field)
	}
	
	const removeField: DropdownMenuContext['removeField'] = (field) => {
		let index = children.indexOf(field)
		if (index > -1) {
			children.splice(index, 1)
		}
	}

	const bodyStyle = computed(() => {
		return {
			height: addUnit(props.value.height),
			zIndex:props.value.popupZIndex+1,
			backgroundColor:props.value.bgColor
		}
	})
	
	const activeId = ref('')
	const activeIndex = ref(-1)
	
	const handlerClick = (index:number) => {
		let item = children[index]
		if(item.disabled)return
		activeIndex.value = index
		activeId.value = activeId.value === children[index].id ? '' : children[index].id
	}
	
	const handleChildToggle = (id:string) => {
		handlerClick(children.findIndex(item => item.id === id))
	}
	
	const close = () => {
		activeId.value = ''
	}
	
	provide(dropdownMenuContextKey, reactive({
		props,
		activeId,
		addField,
		removeField,
		handleChildToggle,
		close
	}))
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/dropdown-menu.scss";
</style>
